<template>

  <!-- 市场活动的录入和编辑共用此页面 -->

  <!-- :model="activityQuery"   表单绑定的数据 -->
  <!-- label-width="110px"      表单整体距离左侧的宽度（可以让表单内容排列整齐） -->
  <!-- :rules="activityRoles"   绑定验证规则 -->
  <!-- ref="activityRefForm"    表单提交之前验证表单的验证规则 -->
  <el-form :model="activityQuery" label-width="110px" :rules="activityRules" ref="activityRefForm">

    <!-- 负责人 -->
    <!-- prop="ownerId" 要验证的内容 -->
    <el-form-item label="负责人" prop="ownerId">
      <el-select v-model="activityQuery.ownerId" placeholder="请选择负责人">
        <el-option
            v-for="owner in this.ownerOptions"
            :key="owner.id"
            :label="owner.name"
            :value="owner.id"/>
      </el-select>
    </el-form-item>

    <!-- 活动名称 -->
    <el-form-item label="活动名称" prop="name">
      <el-input v-model.trim="activityQuery.name" placeholder="请输入活动名称" />
    </el-form-item>

    <!-- 开始时间 -->
    <el-form-item label="开始时间" prop="startTime">
      <!-- type="datetime"  日期选择器的类型（样式） -->
      <!-- value-format     绑定值的格式，向后端提交的格式 -->
      <!-- 注意：这里的格式是YYYY-MM-DD HH:mm:ss，后端的格式是yyyy-MM-dd HH:mm:ss -->
      <el-date-picker
          v-model="activityQuery.startTime"
          type="datetime"
          placeholder="请选择开始时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          clearable
          style="width: 100%;"/>
    </el-form-item>

    <!-- 结束时间 -->
    <el-form-item label="结束时间" prop="endTime">
      <!-- type="datetime"  日期选择器的类型（样式） -->
      <!-- value-format     绑定值的格式，向后端提交的格式 -->
      <!-- 注意：这里的格式是YYYY-MM-DD HH:mm:ss，后端的格式是yyyy-MM-dd HH:mm:ss -->
      <el-date-picker
          v-model="activityQuery.endTime"
          type="datetime"
          placeholder="请选择结束时间"
          value-format="YYYY-MM-DD HH:mm:ss"
          clearable
          style="width: 100%;" />
    </el-form-item>

    <!-- 活动预算 -->
    <el-form-item label="活动预算" prop="cost">
      <el-input v-model.trim="activityQuery.cost" placeholder="请输入活动预算" />
    </el-form-item>

    <!-- 活动描述 -->
    <el-form-item label="活动描述" prop="description">
      <!-- type="textarea"  文本域 -->
      <!-- :rows  行数 -->
      <el-input v-model.trim="activityQuery.description"
                type="textarea"
                :rows="6"
                placeholder="请输入活动描述"/>
    </el-form-item>

    <el-form-item>
      <!-- 根据用户不同的操作调用不同的执行方法 -->
      <!-- 如果当前市场活动的信息中id值大于0，则表明是编辑，否则就是录入，因为编辑的时候查询了市场活动信息，所以id值一定大于0 -->
      <el-button type="primary" @click="this.activityQuery.id > 0 ? editActivitySubmit() : addActivitySubmit()">提交</el-button>
      <el-button @click="goBack()">返回</el-button>
    </el-form-item>
  </el-form>

</template>

<script>
  // 市场活动的录入和编辑共用页面
  import {doGet, doPost, doPut} from "../http/httpRequest.js";
  import {messageTip} from "../util/util.js";

  export default {
    name: 'ActivityRecordView',

    data() {
      return {
        // 市场活动对象
        activityQuery: { },

        // 负责人下拉选项数组
        ownerOptions: [],

        // 市场活动表单验证规则
        activityRules: {
          // 负责人
          ownerId: [
            { required: true, message: '请选择负责人', trigger: 'blur' }
          ],
          // 活动名称
          name: [
            { required: true, message: '请输入活动名称', trigger: 'blur' }
          ],
          // 开始时间
          startTime: [
            { required: true, message: '请选择开始时间', trigger: 'blur' }
          ],
          // 结束时间
          endTime: [
            { required: true, message: '请选择结束时间', trigger: 'blur' }
          ],
          // 活动预算
          cost: [
            { required: true, message: '请输入活动预算', trigger: 'blur' },
            { pattern: /^[0-9]+(\.[0-9]{2})?$/, message: '活动预算必须是整数或者两位小数', trigger: 'blur' }
          ],
          // 活动描述
          description: [
            { required: true, message: '请输入活动描述', trigger: 'blur' },
            { min: 5, max: 255, message: '活动描述字数在5-255之间', trigger: 'blur' }
          ]
        }
      }
    },

    // 钩子函数，页面渲染完成后自动调用
    mounted() {
      // 页面渲染完成后，加载负责人
      this.loadOwner();

      // 加载要编辑的市场活动信息（由于录入和编辑共用此页面，所以需要判断此次操作是录入还是编辑）
      this.loadActivity();
    },

    methods: {
      // 加载负责人
      loadOwner() {
        // 向后台发送请求查询负责人的名字
        doGet("/api/owner/list", { }).then( (resp) => {
          if (resp.data.code === 200) {
            this.ownerOptions = resp.data.data;
          } else {
            messageTip("负责人获取失败", "error");
          }
        })
      },

      // 返回按钮
      goBack() {
        // 返回到上一个路由地址
        this.$router.go(-1);
      },

      // 提交市场活动表单（录入）
      addActivitySubmit() {
        // 提交之前先验证表单规则
        this.$refs.activityRefForm.validate( (isValid) => {
          // 判断验证是否通过
          if (isValid) {
            // 验证活动时间，开始时间不能晚于或等于结束时间
            if (this.activityQuery.startTime < this.activityQuery.endTime) {
              // 使用FormData对象传参
              let formData = new FormData();
              // 遍历activityQuery对象，获取属性名
              for (let field in this.activityQuery) {
                // 向FormData对象中添加参数，通过属性名获取activityQuery对象中属性的值
                formData.append(field, this.activityQuery[field]);
              }

              // 向后端发送请求
              doPost("/api/activity/add", formData).then( (resp) => {
                if (resp.data.code === 200) {
                  messageTip("录入成功", "success");
                  // 返回到市场活动列表页面
                  this.$router.push("/dashboard/activity");
                } else {
                  messageTip("录入失败", "error");
                }
              })
            } else {
              messageTip("开始时间不能晚于或等于结束时间", "error");
            }
          }
        })
      },

      // 加载市场活动
      loadActivity() {
        // 根据路由路径上是否有id参数，来判断本次是录入还是编辑
        // 注意：this.$route.params.id 这个里面的id参数名，必须和路由配置中的参数名保持一致
        let id = this.$route.params.id;
        // 如果id不为空，则表明此次操作是编辑市场活动，需要查询某一条市场活动信息，并填充到表单中
        if (id) {
          // 向后端发送请求
          doGet("/api/activity/get/" + id, { }).then( (resp) => {
            if (resp.data.code === 200) {
              // 将查询到的市场活动信息填充到表单中
              this.activityQuery = resp.data.data;
            } else {
              messageTip("市场活动信息获取失败", "error");
            }
          })
        }
      },

      // 提交市场活动表单（编辑）
      editActivitySubmit() {
        // 提交之前先验证表单规则
        this.$refs.activityRefForm.validate( (isValid) => {
          // 判断验证是否通过
          if (isValid) {
            // 验证活动时间，开始时间不能晚于或等于结束时间
            if (this.activityQuery.startTime < this.activityQuery.endTime) {
              // 使用FormData对象传参
              let formData = new FormData();
              // 遍历activityQuery对象，获取属性名
              for (let field in this.activityQuery) {
                // 如果当前字段有值，不为空，再添加到ForData对象中
                if (this.activityQuery[field]) {
                  // 向FormData对象中添加参数，通过属性名获取activityQuery对象中属性的值
                  formData.append(field, this.activityQuery[field]);
                }
              }

              // 向后端发送请求
              doPut("/api/activity/edit", formData).then( (resp) => {
                if (resp.data.code === 200) {
                  messageTip("编辑成功", "success");
                  // 返回到市场活动列表页面
                  this.$router.push("/dashboard/activity");
                } else {
                  messageTip("编辑失败", "error");
                }
              })
            } else {
              messageTip("开始时间不能晚于或等于结束时间", "error");
            }
          }
        })
      },
    }
  }
</script>

<style scoped>

</style>

